<template>
    <div>
        <div class="logdin" v-if="getLogin">
            <i class="iconfont">&#xe7ae;</i>
            <el-dropdown @command="handClick">
                <span class="el-dropdown-link">
                    {{ getLogin.user }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="push">我的收藏</el-dropdown-item>
                    <el-dropdown-item command="login">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-button type="primary" v-else @click="handLogin" class="logdin">登陆</el-button>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "User",
  created() {
    console.log(this.$router.history.current.fullPath);
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["getValue", "getLogin"]),
    value: {
      get() {
        return this.getValue;
      },
      set(value) {
        console.log("value", value);
        this.setValue(value);
        // 这里可以发起请求
        // this.resetBasic() // 这里的操作为对vuex中的action的调用
      },
    },
  },
  methods: {
    ...mapMutations(["setValue", "setLogin"]),
    handClick(value) {
      if (value === "push") {
        this.$router.push({ path: "/MyCollection" });
      } else {
        this.setLogin(null);
      }
    },
    handLogin() {
      this.setLogin({
        user: "王东东",
      });
    },
  },
};
</script>
<style scoped>
.el-dropdown-link {
    font-size: 20px;
}
.iconfont {
    font-size: 20px;
}
.logdin {
    position: fixed;
    right: 50px;
}
</style>